<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tooltip</title>
    <style>
        .container {
            max-width: 400px;
            margin: 30px auto;
            border-radius: 4px;
            box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.3);
            padding: 16px;
        }

        .carousel {
            position: relative;
            height: 200px;
        }

        .carousel .panels>a {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            text-decoration: none;
            opacity: 0;
            z-index: 0;
            transition: all .3s;
        }

        .carousel .panels>a.active {
            opacity: 1;
            z-index: 1;
        }

        .carousel .panels>a:nth-child(even) {
            background-color: lightskyblue;
        }

        .carousel .panels>a:nth-child(odd) {
            background-color: lightpink;
        }

        .carousel .arrow {
            position: absolute;
            top: 50%;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 50%;
            background: rgba(31, 45, 61, .11);
            opacity: 0;
            transition: all .3s;
            outline: none;
            cursor: pointer;
        }

        .carousel .arrow-pre {
            left: 10px;
            transform: translateX(-10px) translateY(-50%);
        }

        .carousel:hover .arrow-pre {
            transform: translateX(0) translateY(-50%);
            opacity: 1;
        }

        .carousel .arrow-next {
            right: 10px;
            transform: translateX(10px) translateY(-50%);
        }

        .carousel:hover .arrow-next {
            transform: translateX(0) translateY(-50%);
            opacity: 1;
        }


        .carousel .arrow::before {
            content: '';
            display: block;
            width: 6px;
            height: 6px;
            border-left: 1px solid #fff;
            border-top: 1px solid #fff;
            transform: rotate(-45deg);
        }

        .carousel .arrow.arrow-next::before {
            transform: rotate(135deg);
        }

        .carousel .indicators {
            position: absolute;
            z-index: 100;
            left: 50%;
            bottom: 10px;
            transform: translateX(-50%);
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .carousel .indicators>li {
            display: inline-block;
            padding: 5px 0;
            cursor: pointer;
        }

        .carousel .indicators>li::before {
            content: '';
            display: block;
            width: 30px;
            height: 2px;
            border-radius: 2px;
            background: #c0c4cc;
            transition: all .3s;
        }

        .carousel .indicators>li.active::before {
            background: #fff;
        }
    </style>
</head>

<body>
    <div class="carousel">
        <div class="panels">
            <a class="active" href="#0"><img src="https://wx4.sinaimg.cn/mw690/67e33037gy1gid89wk4mhj23402c0x6p.jpg"></a>
            <a href="#1"><img src="https://wx2.sinaimg.cn/mw690/67e33037gy1gid8a2zdtuj23402c07wh.jpg"></a>
            <a href="#2"><img src="https://wx1.sinaimg.cn/mw690/67e33037gy1gid8a06c4ej23402c0u0x.jpg"></a>
            <a href="#3"><img src="https://wx2.sinaimg.cn/mw690/67e33037gy1gid8a5696nj22c0340qv5.jpg"></a>
        </div>
        <div class="arrows">
            <button class="arrow arrow-pre"></button>
            <button class="arrow arrow-next"></button>
        </div>
        <ul class="indicators">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>


    <script>

        class Carousel {
            constructor($root) {
                this.$root = $root
                this.$pre = $root.querySelector('.arrow-pre')
                this.$next = $root.querySelector('.arrow-next')
                this.$$indicators = $root.querySelectorAll('.indicators > li')
                this.$$panels = $root.querySelectorAll('.panels > a')

                this.bind()
            }

            bind() {
                this.$pre.onclick = () => {
                    let index = this.getPreIndex()
                    this.setPage(index)
                    this.setIndicator(index)
                }

                this.$next.onclick = () => {
                    let index = this.getNextIndex()
                    this.setPage(index)
                    this.setIndicator(index)
                }

                this.$$indicators.forEach($indicator => $indicator.onclick = (e) => {
                    let index = [...this.$$indicators].indexOf(e.target)
                    this.setIndicator(index)
                    this.setPage(index)
                })
            }

            getIndex() {
                return [...this.$$indicators].indexOf(this.$root.querySelector('.indicators .active'))
            }

            getPreIndex() {
                return (this.getIndex() - 1 + this.$$indicators.length) % this.$$indicators.length
            }

            getNextIndex() {
                return (this.getIndex() + 1) % this.$$indicators.length
            }

            setPage(index) {
                this.$$panels.forEach($panel => $panel.classList.remove('active'))
                this.$$panels[index].classList.add('active')
            }

            setIndicator(index) {
                this.$$indicators.forEach($indicator => $indicator.classList.remove('active'))
                this.$$indicators[index].classList.add('active')
            }
        }

        let $$carousel = document.querySelectorAll('.carousel')
        $$carousel.forEach($root => new Carousel($root))


    </script>


</body>

</html>